<template>
  <div class="newssend">
    <div class="info">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div>
          <span>消息目标</span>
          <span style="color: red" v-for="(item, index) in info" :key="index"
            >{{ item.user.userName }}
          </span>
        </div>
        <!-- <span style="color: red" v-for="(item, index) in info" :key="index"
            >{{ item.usermessage.usermessageName }}
          </span> -->

        <el-form-item label="消息发送者" prop="sender">
          <el-input
            v-model="ruleForm.sender"
            :clearable="true"
            placeholder="消息发送者"
          ></el-input>
        </el-form-item>
        <el-form-item label="消息标题" prop="title">
          <el-input type="textarea" v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="消息文本" prop="message">
          <el-input type="textarea" v-model="ruleForm.message"></el-input>
        </el-form-item>
        <el-radio-group v-model="radio">
          <el-radio label="发布公告"></el-radio>
          <el-radio label="推送个人"></el-radio>
        </el-radio-group>
        <el-form-item class="notice">
          <el-button
            type="primary"
            @click="submitForm('ruleForm', ruleForm, radio)"
            >发布</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <!-- <el-button type="primary" @click="submitBtn(ruleForm)"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 公告模态框 -->
    <div v-if="isshow">
      <News />
    </div>
  </div>
</template>

<script>
import { mesPost } from "@/network/api/news/news";
import mitt from "@/utils/mitt";
import router from "@/router";
import News from "./News.vue";

export default {
  name: "Newssend",
  components: {
    News,
  },
  created() {
    // this.name();
    // console.log(this.$route.query, 11111111111111111111);
    this.info = this.$route.query.list;
    // console.log(this.$route.query);
    this.name();
  },
  data() {
    return {
      info: [],
      isshow: false,
      noticelist: [],
      noticelistname: [],
      radio: "发布公告",
      ruleForm: {
        broadcastTag: false,
        message: "",
        title: "",
        messageTarget: [],
        sender: "",
        // timeNow: "2022年12月12日",
      },
      rules: {
        // message: [{ required: true, message: "请输入文本", trigger: "blur" }],
        messageTarget: [
          { required: true, message: "请输入目标", trigger: "blur" },
        ],
        sender: [{ required: true, message: "请输入发送者", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 时间
    // time() {
    //   this.ruleForm.timeNow = moment().format("YYYY年MM月DD日");
    //   console.log(this.ruleForm.timeNow, 777777777);
    // },
    name() {
      this.info.forEach((res) => {
        // console.log(res);
        this.ruleForm.messageTarget.push(res.user.userName);
        // console.log(this.ruleForm,4444444444444);
      });
    },
    // 消息目标
    // name() {
    //   let namelist = getStorage("noticlist");
    //   console.log(namelist, 22222222222222);
    // },
    // 关闭布告
    // close() {
    //   // this.isshow = !this.isshow;
    //   mitt.on("isshow", (res) => {
    //     console.log(res, "关闭");
    //     this.isshow = res;
    //   });
    // },
    // 发布公告或推送个人

    submitForm(name, data, state) {
      console.log(data);
      // console.log(data.messageTarget.length, 999999999999999);

      if (state == "发布公告" && data.messageTarget.length > 1) {
        // this.time();
        data.broadcastTag = true;
      } else if (state == "推送个人" && data.messageTarget.length < 2) {
        data.broadcastTag = false;
      } else {
        return alert("发布模式有误");
      }

      this.$refs[name].validate((valid) => {
        if (valid) {
          alert("提交成功!");
          this.submitBtn(data);
        } else {
          console.log("填写有误");
          return false;
        }
      });
    },
    async submitBtn(data) {
      console.log(11);
      if (data.broadcastTag) {
        console.log(22, data);
        mitt.emit("addtour", data);
        let messend = await mesPost(data);
        console.log(messend, 22222222222);

        this.isshow = true;
        router.replace({ path: "touristlist" });
        // router.push({ path: "news", query: { menu: data } });
      } else if (!data.broadcastTag) {
        console.log("tuisong");
        mitt.emit("personal", data);
        let messend = await mesPost(data);
        console.log(messend, 33333333333);
        router.replace({ path: "touristlist" });
      }

      // this.$router.go(0);
      // this.formInline = {};
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang='scss'>
.newssend {
  width: 100%;
  position: relative;
  .info {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  .notice {
    margin-top: 20px;
  }
  .new {
    position: absolute;
    top: 0;
    left: 30%;
    z-index: 99;
  }
}
</style>